
const ImageStyle = {
    width: String,
    height: String
}

const ImageElement = {
    type: 'image',
    src: String,
    alt: String,
    href: String,
    style: ImageStyle,
    children: [{ text: '' }]
}
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
function getThumbnailWdith() {
    return window.screen.width - 65+ "px"
}
function renderThumbnailImage(elemNode, children, editor) {
    const { src, alt = '',uuid='', href = '', thumb = '', style = {} } = elemNode;
    const { width = '', height = '' } = style
    const selected = DomEditor.isNodeSelected(editor, elemNode) // 图片是否选中
    const imageStyle = {
        width,
        height,
    }
    const containerId = genContainerId(editor, elemNode)
    // if (width) imageStyle.width = '100%'
    // if (height) imageStyle.height = '100%'
    imageStyle.width = getThumbnailWdith()
    let iTop=0;
    if(style.imgHeight&&style.imgWidth){
        iTop = parseInt(style.imgHeight/(style.imgWidth/(window.screen.width - 56)))
    }
    // imageStyle.height=
    // 【注意】void node 中，renderElem 不用处理 children 。core 会统一处理。
        const vnode = h(
            `div`,
            {
                props: { id: "video", contentEditable: false, src: src, }, // HTML 属性，驼峰式写法
                dataset: { href: href,thumb:thumb,uuid: uuid },
                style: imageStyle, // style ，驼峰式写法
            }
        );
        const vnode2 = h(
            `span`,
            {
                props: { contentEditable: false, }, // HTML 属性，驼峰式写法
                style: {
                    position: "absolute",
                    transform: "translate(-50%, -50%)",
                    left: "50%",
                    width: "50px",
                    top: iTop/6+"px",
                    height: "50px",
                    zIndex: 999,
                    background: "url('https://img-blog.csdnimg.cn/9e61bca1432146d2bb39c4e09521af32.png') no-repeat",
                    backgroundSize: "contain",
                    cursor: "pointer",
                }, // style ，驼峰式写法
                on: { click() { 
                    window.android ?
                    window.android.videoPlay(href) :
                    window.webkit.messageHandlers.videoPlay.postMessage(href); }}
            }
        );
        const isDisabled = editor.isDisabled()
    
        return h(
            "div",
            {
                props: { id: containerId, className: "w-e-video-container w-e-image-container w-e-selected-image-container", }, // HTML 属性，驼峰式写法
                style: imageStyle, // style ，驼峰式写法
            },
            [vnode2,vnode]
        )
    
    // if (selected && !isDisabled) {
    //   // 选中，未禁用 - 渲染 resize container
    //   return renderResizeContainer(editor, elemNode, vnode, { width, height })
    // }
    // 其他，渲染普通 image container
    // return renderContainer(editor, elemNode, vnode, { width, height })
}

function parseThumbnailHtml(elem, children, editor) {
    const $elem = $(elem)
    let href = $elem.attr('data-href') || ''
    let thumb = $elem.attr('data-thumb') || ''
    let dataStyle = $elem.attr('data-style').split(",")
    let duration=$elem.attr('data-duration')
    let fileid= $elem.attr('data-file-id')||''
    let uuid = $elem[0].id || ''
    href = decodeURIComponent(href) // 兼容 V4
    return {
        type: 'thumbnail',
        src: $elem.attr('data-href') || thumb,
        alt: $elem.attr('alt') || '',
        href,
        thumb,
        duration,
        fileid,
        uuid,
        style: {
            width: getStyleValue($elem, 'width'),
            height: getStyleValue($elem, 'height'),
            imgHeight:dataStyle[0],
            imgWidth:dataStyle[1]
        },
        children: [{ text: '' }], // void node 有一个空白 text
    }
}
const renderThumbnailConf = {
    type: 'thumbnail', // 和 elemNode.type 一致
    renderElem: renderThumbnailImage,
}
const parseThumbnailHtmlConf = {
    selector: 'img[data-w-e-type="thumbnail"]', // data-w-e-type 属性，留给自定义元素，保证扩展性
    parseElemHtml: parseThumbnailHtml,
}
function thumbnailToHtml(elemNode, childrenHtml) {
    const { src, alt = '', href = '', duration='', thumb='',uuid='',fileid ='', style = {} } = elemNode
    const { width = '', height = '' } = style
    let styleStr = ''
    if (width) styleStr += `width: ${width};`
    if (height) styleStr += `height: ${height};`
    return `<video data-w-e-type="thumbnail" width="100%" src="${src}" data-file-id="${fileid}" data-duration='${duration}'  x5-video-player-type="h5" webkit-playsinline="true" controls controlslist="nodownload nofullscreen noremoteplayback" playsinline="true" 
    data-thumb="${thumb}" data-href="${href}" data-style="${style.imgHeight+','+style.imgWidth}" id="${uuid}" data-md5></video>`
    // return `<img class="w-e-video-container" src="${src}" alt="${alt}" data-href="${href}" id="${blueimp_md5(href.split('/')[href.split('/').length - 1])+generateUUID()}" data-md5="${blueimp_md5(href.split('/')[href.split('/').length - 1])+generateUUID()}"  style="${styleStr}"/>`
}

const thumbnailToHtmlConf = {
    type: 'thumbnail',
    elemToHtml: thumbnailToHtml,
}

